<template>
  <div id="business">
    <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="whole" label="全网">
        <div class="Data_box">
          <div class="Data_title">
            <p>企业数</p>
            <p v-if="reports.businesscount == 0">-</p>
            <p v-else>
              {{ reports.businesscount }}
            </p>
          </div>
          <div class="Data_title">
            <p>用户数</p>
            <p v-if="reports.usercount == 0">-</p>
            <p v-else>
              {{ reports.usercount }}
            </p>
          </div>
          <div class="Data_title">
            <p>活跃用户数</p>
            <p v-if="reports.active_user_nums == 0">-</p>
            <p v-else>
              {{ reports.active_user_nums }}
            </p>
          </div>
          <div class="Data_title">
            <p>累计流量（GB）</p>
            <p v-if="reports.sum_throughputcount == null">-</p>
            <p v-else>
              {{ reports.sum_throughputcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>上行流量（GB）</p>
            <p v-if="reports.upward_flowcount == null">-</p>
            <p v-else>
              {{ reports.upward_flowcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>下行流量（GB）</p>
            <p v-if="reports.downward_flowcount == null">-</p>
            <p v-else>
              {{ reports.downward_flowcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>PDP/PDN激活成功率</p>
            <p v-if="reports.pdp_ask_success_rate == null">-</p>
            <p v-else>{{ reports.pdp_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>DNS连接成功率</p>
            <p v-if="reports.dns_ask_success_rate == null">-</p>
            <p v-else>{{ reports.dns_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP连接成功率</p>
            <p v-if="reports.tcp_ask_success_rate == null">-</p>
            <p v-else>{{ reports.tcp_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>HTTP连接成功率</p>
            <p v-if="reports.http_ask_success_rate == null">-</p>
            <p v-else>{{ reports.http_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP12成功率</p>
            <p v-if="reports.tcp12_success_rate == null">-</p>
            <p v-else>{{ reports.tcp12_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP23成功率</p>
            <p v-if="reports.tcp23_success_rate == null">-</p>
            <p v-else>{{ reports.tcp23_success_rate }}%</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="situation_2G" label="2G">
        <div class="Data_box">
          <div class="Data_title">
            <p>企业数</p>
            <p v-if="differences.businesscount == 0">-</p>
            <p v-else>
              {{ differences.businesscount }}
            </p>
          </div>
          <div class="Data_title">
            <p>用户数</p>
            <p v-if="differences.usercount == 0">-</p>
            <p v-else>
              {{ differences.usercount }}
            </p>
          </div>
          <div class="Data_title">
            <p>活跃用户数</p>
            <p v-if="differences.active_user_nums == 0">-</p>
            <p v-else>
              {{ differences.active_user_nums }}
            </p>
          </div>
          <div class="Data_title">
            <p>累计流量（GB）</p>
            <p v-if="differences.sum_throughputcount == null">-</p>
            <p v-else>
              {{ differences.sum_throughputcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>上行流量（GB）</p>
            <p v-if="differences.upward_flowcount == null">-</p>
            <p v-else>
              {{ differences.upward_flowcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>下行流量（GB）</p>
            <p v-if="differences.downward_flowcount == null">-</p>
            <p v-else>
              {{ differences.downward_flowcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>PDP/PDN激活成功率</p>
            <p v-if="differences.pdp_ask_success_rate == null">-</p>
            <p v-else>{{ differences.pdp_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>DNS连接成功率</p>
            <p v-if="differences.dns_ask_success_rate == null">-</p>
            <p v-else>{{ differences.dns_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP连接成功率</p>
            <p v-if="differences.tcp_ask_success_rate == null">-</p>
            <p v-else>{{ differences.tcp_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>HTTP连接成功率</p>
            <p v-if="differences.http_ask_success_rate == null">-</p>
            <p v-else>{{ differences.http_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP12成功率</p>
            <p v-if="differences.tcp12_success_rate == null">-</p>
            <p v-else>{{ differences.tcp12_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP23成功率</p>
            <p v-if="differences.tcp23_success_rate == null">-</p>
            <p v-else>{{ differences.tcp23_success_rate }}%</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="situation_4G" label="4G">
        <div class="Data_box">
          <div class="Data_title">
            <p>企业数</p>
            <p v-if="excellents.businesscount == 0">-</p>
            <p v-else>
              {{ excellents.businesscount }}
            </p>
          </div>
          <div class="Data_title">
            <p>用户数</p>
            <p v-if="excellents.usercount == 0">-</p>
            <p v-else>
              {{ excellents.usercount }}
            </p>
          </div>
          <div class="Data_title">
            <p>活跃用户数</p>
            <p v-if="excellents.active_user_nums == 0">-</p>
            <p v-else>
              {{ excellents.active_user_nums }}
            </p>
          </div>
          <div class="Data_title">
            <p>累计流量（GB）</p>
            <p v-if="excellents.sum_throughputcount == null">-</p>
            <p v-else>
              {{ excellents.sum_throughputcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>上行流量（GB）</p>
            <p v-if="excellents.upward_flowcount == null">-</p>
            <p v-else>
              {{ excellents.upward_flowcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>下行流量（GB）</p>
            <p v-if="excellents.downward_flowcount == null">-</p>
            <p v-else>
              {{ excellents.downward_flowcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>PDP/PDN激活成功率</p>
            <p v-if="excellents.pdp_ask_success_rate == null">-</p>
            <p v-else>{{ excellents.pdp_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>DNS连接成功率</p>
            <p v-if="excellents.dns_ask_success_rate == null">-</p>
            <p v-else>{{ excellents.dns_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP连接成功率</p>
            <p v-if="excellents.tcp_ask_success_rate == null">-</p>
            <p v-else>{{ excellents.tcp_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>HTTP连接成功率</p>
            <p v-if="excellents.http_ask_success_rate == null">-</p>
            <p v-else>{{ excellents.http_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP12成功率</p>
            <p v-if="excellents.tcp12_success_rate == null">-</p>
            <p v-else>{{ excellents.tcp12_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP23成功率</p>
            <p v-if="excellents.tcp23_success_rate == null">-</p>
            <p v-else>{{ excellents.tcp23_success_rate }}%</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="situation_NB-IOT" label="NB-IOT">
        <div class="Data_box">
          <div class="Data_title">
            <p>企业数</p>
            <p v-if="nbiots.businesscount == 0">-</p>
            <p v-else>
              {{ nbiots.businesscount }}
            </p>
          </div>
          <div class="Data_title">
            <p>用户数</p>
            <p v-if="nbiots.usercount == 0">-</p>
            <p v-else>
              {{ nbiots.usercount }}
            </p>
          </div>
          <div class="Data_title">
            <p>活跃用户数</p>
            <p v-if="nbiots.active_user_nums == 0">-</p>
            <p v-else>
              {{ nbiots.active_user_nums }}
            </p>
          </div>
          <div class="Data_title">
            <p>累计流量（GB）</p>
            <p v-if="nbiots.sum_throughputcount == null">-</p>
            <p v-else>
              {{ nbiots.sum_throughputcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>上行流量（GB）</p>
            <p v-if="nbiots.upward_flowcount == null">-</p>
            <p v-else>
              {{ nbiots.upward_flowcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>下行流量（GB）</p>
            <p v-if="nbiots.downward_flowcount == null">-</p>
            <p v-else>
              {{ nbiots.downward_flowcount }}
            </p>
          </div>
          <div class="Data_title">
            <p>PDP/PDN激活成功率</p>
            <p v-if="nbiots.pdp_ask_success_rate == null">-</p>
            <p v-else>{{ nbiots.pdp_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>DNS连接成功率</p>
            <p v-if="nbiots.dns_ask_success_rate == null">-</p>
            <p v-else>{{ nbiots.dns_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP连接成功率</p>
            <p v-if="nbiots.tcp_ask_success_rate == null">-</p>
            <p v-else>{{ nbiots.tcp_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>HTTP连接成功率</p>
            <p v-if="nbiots.http_ask_success_rate == null">-</p>
            <p v-else>{{ nbiots.http_ask_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP12成功率</p>
            <p v-if="nbiots.tcp12_success_rate == null">-</p>
            <p v-else>{{ nbiots.tcp12_success_rate }}%</p>
          </div>
          <div class="Data_title">
            <p>TCP23成功率</p>
            <p v-if="nbiots.tcp23_success_rate == null">-</p>
            <p v-else>{{ nbiots.tcp23_success_rate }}%</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div id="national_map"></div>
    <!-- <el-button size="mini" type="primary" @click="backMap()" class="NationalBtn"
      >返回</el-button> -->
    <div id="Statistical">
      <ImgBox />
      <StatisticalChart
        :touchTest="touchTest"
        :situationtitle="situationtitle"
      />
    </div>
    <BadgeLeft />
  </div>
</template>

<script src="./Business.js"></script>
<style lang="scss">
#business {
  height: 94vh;
  background-color: #eef1f9;
  position: relative;
  margin: 0 auto;
  
  .img_box {
    position: absolute;
    top: 39vh;
    right: 0.5vw;
    
    
    .el-table {
      width: 95% !important;
      &::before {
        background-color: transparent;
      }
    }
    .el-table__body {
      width: 100.05% !important;
    }
    .el-table th {
      color: black;
      background-color: #e7f7ff;
      border-bottom: 1px solid #e7f7ff;
    }
    .el-table td {
      color: black;
      border: 1px solid #ffffff;
      background-color: #ffffff;
    }
    .el-table__empty-block {
      height: 0 !important;
      background-color: #ffffff;
    }
    // 滚动条
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #ddd;
      border-radius: 3px;
    }
    .current-row {
      background-color: #ECF5FF;
      td {
        background-color: transparent;
      }
    }
  }
  /*1.显示滚动条：当内容超出容器的时候，可以滚动。：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条这里可以让右边的滚动条不显示*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }
}
#business .el-tabs__header {
  margin: 0;
}
#business .el-tabs__active-bar {
  display: none;
}
#business .el-tabs__nav-wrap::after {
  height: 0;
}
#business .el-tabs {
  width: 20vw;
  height: 50vh;
  padding: 0.1vh 0.5vw;
  background-color: #eef1f9;
}
#business .el-tabs__item {
  width: 5vw;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0;
  background: url("../../assets/image/Shape_copy1.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 2px;
}
#business .el-tabs__item.is-active {
  background: url("../../assets/image/shape13.png") no-repeat;
  background-size: 100% 100%;
  color: white;
}
.Data_box {
  width: 20vw;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.Data_box .Data_title {
  width: 9.8vw;
  height: 7vh;
  margin-bottom: 5px;
  background: url("../../assets/image/group25.png") no-repeat;
  background-size: 100% 100%;
}
.Data_title p:nth-child(1) {
  font-size: 18px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
}
.Data_title p:nth-child(2) {
  font-size: 25px;
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  font-weight: 700;
  text-align: center;
  color: #2973ff;
}
#national_map {
  width: 50vw;
  height: 50vh;
  position: absolute;
  top: 0;
  left: 22vw;
  background-color: #eef1f9;
}
#Statistical {
  width: 22vw;
  height: 50vh;
  padding: 0 0.5vw;
  position: absolute;
  top: 0;
  right: 0;
}
.NationalBtn {
  position: absolute;
  top: 1vh;
  right: 27vw;
  z-index: 5;
}
/* 表格 */
#business .el-table {
  width: 96vw !important;
  height: 34vh !important;
}
#business .el-table__body {
  width: 1840px !important;
}
#business .el-table::before {
  background-color: transparent;
}

#business .el-table th {
  color: black;
  background-color: #b7cdf5;
  border-bottom: 1px solid #b2c3e3;
}

#business .el-table td {
  color: black;
  border: 1px solid #c2cbde;
  background-color: #eef1f9;
}
#business .el-table__empty-block {
  height: 0 !important;
  background-color: #0095ff33;
}
#business .el-table__empty-text {
  font-size: 18px;
}
/*滚动条的宽度*/
#business .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
/*滚动条滑块*/
#business .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
/* 分页按钮 */
.el-pagination {
  margin-top: 5px;
  padding: 2px 130px;
}
.import .el-input__inner::placeholder {
  color: #005185 !important;
}
.import .el-input__inner {
  width: 14vw;
  height: 4vh;
  padding-left: 3px;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  padding-left: 5px;
  background-color: transparent !important;
  border: 0 !important;
}
@media screen and (max-width: 1366px) {
  .national {
    height: 93vh;
    padding: 0.5vh 0.5vw;
  }
  #business {
    width: 98vw;
    height: 93vh;
    background-color: #eef1f9;
    position: relative;
    margin: 0 auto;
  }
  #business .el-tabs__header {
    margin: 0;
  }
  #business .el-tabs__active-bar {
    display: none;
  }
  #business .el-tabs__nav-wrap::after {
    height: 0;
  }
  #business .el-tabs {
    width: 20vw;
    height: 50vh;
    padding: 0.1vh 0.5vw;
    background-color: #eef1f9;
  }
  #business .el-tabs__item {
    width: 5vw;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0;
    background: url("../../assets/image/Shape_copy1.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 2px;
  }
  #business .el-tabs__item.is-active {
    background: url("../../assets/image/shape13.png") no-repeat;
    background-size: 100% 100%;
    color: white;
  }
  .Data_box {
    width: 20vw;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
  .Data_box .Data_title {
    width: 9.8vw;
    height: 6.7vh;
    margin-bottom: 5px;
    background: url("../../assets/image/group25.png") no-repeat;
    background-size: 100% 100%;
  }
  .Data_title p:nth-child(1) {
    font-size: 15px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
  }
  .Data_title p:nth-child(2) {
    font-size: 18px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
    text-align: center;
    color: #2973ff;
  }
  #national_map {
    width: 50vw;
    height: 50vh;
    position: absolute;
    top: 0;
    left: 22vw;
    background-color: #eef1f9;
  }
  #Statistical {
    width: 22vw;
    height: 50vh;
    padding: 0 0.5vw;
    position: absolute;
    top: 0;
    right: 0;
  }
  .NationalBtn {
    position: absolute;
    top: 1vh;
    right: 27vw;
    z-index: 5;
  }
  /* 表格 */
  #business .el-table {
    width: 96vw !important;
    height: 30vh !important;
  }
  #business .el-table__body {
    width: 1307px !important;
  }
  #business .el-table::before {
    background-color: transparent;
  }

  #business .el-table th {
    color: black;
    background-color: #b7cdf5;
    border-bottom: 1px solid #b2c3e3;
  }

  #business .el-table td {
    color: black;
    border: 1px solid #c2cbde;
    background-color: #eef1f9;
  }
  #business .el-table__empty-block {
    height: 0 !important;
    background-color: #0095ff33;
  }
  #business .el-table__empty-text {
    font-size: 18px;
  }
  /*滚动条的宽度*/
  #business .el-table__body-wrapper::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  /*滚动条滑块*/
  #business .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
  /* 分页按钮 */
  .el-pagination {
    margin-top: 5px;
    padding: 2px 130px;
  }
  .import .el-input__inner::placeholder {
    color: #005185 !important;
  }
  .import .el-input__inner {
    width: 14vw;
    height: 4vh;
    padding-left: 3px;
    font-size: 16px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    padding-left: 5px;
    background-color: transparent !important;
    border: 0 !important;
  }
}
</style>
